<template>
  <div class="w-full h-full flex justify-center">
    <div class="w-1/2 h-1/2 m-10 flex flex-col justify-center items-center border border-2 border-dashed border-slate-300">
      <div>
        <svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 109.3V320c0 17.7 14.3 32 32 32s32-14.3 32-32V109.3l73.4 73.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-128-128zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64c0 53 43 96 96 96H352c53 0 96-43 96-96V352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V352z"/></svg>
      </div>
      <label>
        <div class="w-60 h-14 m-10 rounded-md upload-color text-white flex items-center justify-center cursor-pointer">上传视频</div>
        <input @change="toFrame" ref="myVideo" class="hidden" type="file">
      </label>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useVideo} from "@/store/video";
import {useRouter} from "vue-router"
import {ref} from "vue"

const router = useRouter()
const video = useVideo()
const myVideo = ref();

function toFrame(){
  video.videoFile = myVideo.value.files[0]
  router.push({name:"frame"});
}

</script>

<style scoped>
.upload-color{
  background-color: #00a1d6;
}
</style>
